<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
			第一步:使用CDN方式添加vue的库  
			说明: CDN 是构建在数据网络上的一种分布式的内容分发网 
		-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<!-- 第二步 创建一个div MVVM模型中的V  View视图-->
		<div id="app">
			插值表达式
			<br />
			{{msg}}
			<br />
			{{name}}
		</div>

		<script>
			// 第三步 创建一个Vue的实例对象 
			// MVVM 模型中的 VM
			const vm = Vue.createApp({
				data() {
					// MVVM中的模型 Model
					return {
						msg: "Hello Vue!",
						name: "张三"
					}
				}
			})

			// 第四步: 将vm挂载到app元素上
			// #app css的id选择器 作用:找到id为app的DOM元素
			vm.mount("#app");
		</script>
	</body>
</html>
